<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行政村信息</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" />
    <link rel="stylesheet" href="../../css/xinxiguanli/cunganbuxinxi.css">
    <link rel="stylesheet" href="../../fonts/xinxiguanli/font/iconfont.css">
</head>
<style>
    .chaxun {
        display: inline;
        width: 90%;
        margin-right: 20px;
    }
    
    .dignbuanniu {
        margin: 15px 0;
    }
    
    .dingbuyihang {
        padding: 0px 10px;
        width: 90%;
    }
    /*水平竖直居中  */
    
    .juzhong {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .xingzhengcunxinxitianjia {
        width: 60%;
    }
    
    .hanggao {
        margin: 15px 0px;
    }
    
    .xiangqingtitle {
        color: #999;
    }
    
    .xiangqingcontent {
        text-align: left;
        width: 50%;
    }
    
    .xiangqingjianjie {
        width: auto;
        text-align: left;
        text-indent: 40px;
        padding: 9px 40px;
    }
    
    img {
        height: 300px;
        width: 300px;
    }
    
    .quanxiancaozuo {
        cursor: not-allowed;
    }
</style>


<body>
    <div style="padding: 20px; background-color: #f2f2f2;">
        <div class="layui-card layui-col-space15" style="padding: 20px; background-color: #fff;">
            <div class="layui-card-body">
                <!-- 顶部按钮 -->
                <form class="layui-form" action="" lay-filter="saixuan">
                    <div class="layui-row">

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button disabled type="button" class="layui-btn quanxiancaozuo" onclick="tianjia()">
                        <i class="layui-icon layui-icon-addition"></i>&nbsp;&nbsp;添加
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button disabled type="button" class="layui-btn layui-btn-danger quanxiancaozuo" onclick="shanchucheck()">
                        <i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除
                      </button>
                        </div>

                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md1 dignbuanniu"></div>

                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="qu1" name="areaId" lay-verify="required" lay-filter="qu1">
                                    <option value="">地区筛选(区/县)</option>
                                </select>
                            </label>
                        </div>

                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="zhen1" name="townId" lay-verify="required" lay-filter="zhen1">
                                    <option value="">地区筛选(镇/街道)</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">

                            <label class="layui-form-label dingbuyihang">
                        <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                            <option value="">地区筛选(村)</option>
                        </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <input type="text" name="keyWords" required lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                        </div>
                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn " onclick="chaxun()">
                                <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                              </button>
                        </div>

                    </div>
                </form>
                <!-- 底部表格 -->
                <table id="zhenjiedaoxinxi" lay-filter="biaoge"></table>
            </div>
        </div>
    </div>
</body>

<script src="../../layui/layui.js"></script>
<script src="../../mock/mock/mock-min.js"></script>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../mock/mock1.js"></script>

<script>
    function quxiaojinyong() {
        if (localStorage.getItem('level') == '0' || localStorage.getItem('level') == '1' || localStorage.getItem('level') == '2') {
            $('.quanxiancaozuo').attr("disabled", false)
            $('.quanxiancaozuo').css("cursor", "pointer");
        } else {

        }
    }
    // 图片上传的文件流
    var tupian = []
        // 图片上传返回的url
    var tupian1 = []
    var table
    var form
    var option
    var upload
    var layer1
    layui.use(["upload", "table", "jquery", "form"], function() {
        table = layui.table;
        form = layui.form;
        upload = layui.upload;
        layer1 = layer
            // form控制
        form.render();
        //监听提交
        form.on('submit(tijiao)', function(data) {
            chongzai()
        });
        //监听编辑
        form.on('submit(bianji)', function(data) {
            chongzai()
        });
        table.on('tool(biaoge)', function(obj) {
            console.log(obj);
            switch (obj.event) {
                // 编辑页面
                case 'edit':
                    layer.open({
                        type: 1,
                        title: "行政村信息编辑",
                        content: `
                        <div class="juzhong">
                        <form class="layui-form xingzhengcunxinxitianjia" id="shangchuan" lay-filter="bianji" action="">
                            <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" class="qu" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" class="zhen">
                        <option value="">请选择所属镇</option>
                </select>
            </div>
        </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">村名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入村名称" autocomplete="off" class="layui-input" value="` + obj.data.name + `">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所在位置</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required lay-verify="required" placeholder="请输入所在位置" autocomplete="off" class="layui-input" value="` + obj.data.address + `">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">人口数</label>
                        <div class="layui-input-block">
                            <input type="number" name="population" required lay-verify="required" placeholder="请输入所在位置" autocomplete="off" class="layui-input" value="` + obj.data.population + `">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">占地面积</label>
                        <div class="layui-input-block">
                            <input type="number" name="footprint" required lay-verify="required" placeholder="请输入所在位置" autocomplete="off" class="layui-input" value="` + obj.data.footprint + `">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">村简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="请输入内容" class="layui-textarea desc" value="` + obj.data.introduction + `"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
            <label class="layui-form-label">村貌图</label>
            <div class="layui-input-block">
                <div class="layui-upload" name="">
                    <div class="layui-upload" name="">
                        <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                        <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="tupianyuelan"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
                </form>
                </div>
`,
                        offset: "auto",
                        area: ["1000px", "800px"],
                        success: function() {
                            var tupianIndex = 0;
                            var tupianImg = []
                            var tupianJianSuo = []
                                // 将图片赋空  然后赋值
                            tupian = []
                            tupian1 = []
                            var cunmaotu0 = JSON.parse(obj.data.image);
                            for (var i = 0; i < cunmaotu0.length; i++) {
                                console.log
                                if (cunmaotu0[i] != "") {
                                    tupianImg[tupianIndex] = cunmaotu0[i]
                                    tupianIndex++
                                }
                            }
                            cunmaotu0 = tupianImg
                            tupian1 = cunmaotu0
                            console.log(tupian1)
                            if (cunmaotu0 !== null && cunmaotu0.length !== 0) {
                                cunmaotu0.forEach((item, index) => {
                                    // $('#tupianyuelan').append(`<img onclick=quchutupian("` + item.url + `",this) src=" ` + item.url + `" class="layui-upload-img">`)
                                    $('#tupianyuelan').append(
                                        `<div class="layui-hide imgParent uploadDemoView">` +
                                        `<img onclick=quchutupian("` + item.url + `",this) src=" ` + item.url + `" class="layui-upload-img imgimg">` +
                                        `<div class="imgspan" >` +
                                        `<span class="iconfont icon-shanchu" data="` + index + `" style="color: #fff;"></span>` +
                                        `</div>` +
                                        `</div>`
                                    )
                                    tupianJianSuo.push(index);
                                    console.log(tupianJianSuo)
                                    layui.$('.uploadDemoView').removeClass('layui-hide');
                                })
                            }
                            // 删除图片
                            $(".icon-shanchu").click(function() {
                                console.log($(this).attr("data"));
                                $(this).parents(".uploadDemoView").addClass('layui-hide');
                                for (var i = 0; i < tupianJianSuo.length; i++) {
                                    if ($(this).attr("data") == tupianJianSuo[i]) {
                                        tupian1.splice(i, 1);
                                        tupianJianSuo.splice(i, 1);
                                    }
                                }
                                $(this).parents(".uploadDemoView").remove();
                                console.log(tupian1)
                                console.log(tupianJianSuo)
                            })
                            areas.forEach(item => {
                                $('#qu')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                            })
                            towns.forEach(item => {
                                $('.zhen')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                            })
                            $('.qu').val(obj.data.areaId)
                            $('.zhen').val(obj.data.townId)
                            $('.desc').val(obj.data.introduction)
                            form.render('select', "bianji");

                            // 1.区选择
                            form.on('select(qu)', function(data) {
                                $('#zhen').empty()
                                $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                                towns.forEach(item => {
                                    if (item.areaId == data.value) {
                                        $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            upload.render({
                                elem: '#shangchuantupian',
                                url: url + 'upload',
                                name: "files",
                                data: {
                                    folderName: "Village"
                                },
                                headers: {
                                    token: localStorage.getItem('token')
                                },
                                field: "multipartFiles",
                                auto: false,
                                bindAction: "#shangchuananniu",
                                multiple: true,
                                before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                    loading2 = layer.load(); //换了种风格
                                },
                                allDone: function(obj) { //当文件全部被提交后，才触发
                                    layer.close(loading2);
                                    layer.msg('上传成功')
                                },
                                choose: function(obj) {
                                    var files = obj.pushFile();
                                    console.log(files)
                                    console.log(obj)
                                        //预读本地文件示例，不支持ie8
                                    obj.preview(function(index, file, result) {
                                        tupian.push(file)
                                        console.log(tupian1.length)
                                            // $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                                        $('#tupianyuelan').append(
                                            `<div class="layui-hide imgParent uploadDemoView">` +
                                            `<img src="` + result + `" alt="` + file.name + `" class="layui-upload-img imgimg">` +
                                            `<div class="imgspan" >` +
                                            `<span class="iconfont icon-shanchu" data="` + tupianIndex + `" style="color: #fff;"></span>` +
                                            `</div>` +
                                            `</div>`
                                        )
                                        tupianIndex++
                                        layui.$('.uploadDemoView').removeClass('layui-hide');
                                        // 删除图片
                                        $(".icon-shanchu").click(function() {
                                            console.log($(this).attr("data"));
                                            $(this).parents(".uploadDemoView").addClass('layui-hide');
                                            for (var i = 0; i < tupianJianSuo.length; i++) {
                                                if ($(this).attr("data") == tupianJianSuo[i]) {
                                                    tupian1.splice(i, 1);
                                                    tupianJianSuo.splice(i, 1);
                                                }
                                            }
                                            $(this).parents(".uploadDemoView").remove();
                                            console.log(tupian1)
                                        })

                                    });
                                },
                                done: function(res, index, upload) {
                                    res.data = JSON.parse(res.data)
                                    console.log(res)
                                    if (res.code === 200) {
                                        res.data.forEach(item => {
                                            tupian1.push({
                                                name: item.name,
                                                url: item.url
                                            })
                                        })
                                    }
                                },
                                error: function(index, upload) {
                                    layer.msg("上传失败")
                                        //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                                },

                            })
                        },
                        btn: ['保存编辑', ], //可以无限个按钮
                        btnAlign: "c",
                        btn1: function() {
                            var data = form.val("bianji");
                            if (tupian1.length !== 0) {
                                data.image = JSON.stringify(tupian1)
                            }
                            if (data.address !== "" && data.townId !== "" && data.footprint !== "" && data.introduction !== "" && data.name !== "" && data.population !== "") {
                                data.id = obj.data.id
                                console.log(tupian1)
                                console.log(data)

                                $.ajax({
                                    url: url + "village/addoredivillage",
                                    data: data,
                                    method: "post",
                                    traditional: true, //防止深度序列化
                                    success: function(data) {
                                        console.log(data)
                                        if (data.code === 200) {
                                            layer.closeAll();
                                            table.reload("biaoge1", option);
                                            layer.msg("修改成功")
                                        } else {
                                            layer.msg("修改失败")
                                        }
                                        tupian = []
                                    },
                                    error: function(err) {
                                        layer.msg("修改失败")
                                    },
                                });
                            } else {
                                layer.msg("请完善信息")
                            }
                        }
                    });
                    break;
                case 'delete':
                    layer.open({
                        type: 1,
                        title: '删除',
                        offset: "auto",
                        content: `<div style="font-size: 14px; color: #606266;line-height: 100px;height: 100px;text-align: center;">确认要删除当前项吗!</div>`,
                        area: ["350px", "200px"],
                        btn: ['删除', '取消', ], //可以无限个按钮
                        btn1: function() {
                            var data = {};
                            data.ids = obj.data.id
                            console.log(data)
                            $.ajax({
                                url: url + "village/deletevillage",
                                method: "get",
                                data: data,
                                success: function(data) {
                                    console.log(data);
                                    if (data.code == 200) {
                                        layer.msg('删除成功!')
                                        table.reload("biaoge1", option);
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {
                                    layer.msg('删除失败!')
                                },
                            });
                            layer.closeAll();
                        },
                        btn2: function() {
                            layer.msg('已取消操作')
                        }
                    })
                    break;
                case 'xiangqing':
                    layer.open({
                        type: 1,
                        title: "详细信息",
                        offset: "auto",
                        content: `
                        <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">村名称</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.name + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属街道</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.townname + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所在位置</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.address + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">人口数</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.population + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">占地面积</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.footprint + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                     
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 hanggao" style="margin: 20px 0 0 0;">
                        <label class="layui-form-label xiangqingtitle">村简介</label>

                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 hanggao" style="margin: 0;">
                        <label class="layui-form-label xiangqingjianjie">` + obj.data.introduction + `</label>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 hanggao" style="margin: 40px 0 0 0;">
                        <label class="layui-form-label xiangqingtitle">村貌图</label>

                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 hanggao" style="margin: 0;">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="tupianyuelan1"></div>
                        </blockquote>
                    </div>
                </div>
                        `,
                        area: ["1000px", "700px"],
                        success: function() {

                            var cunmaotu0 = JSON.parse(obj.data.image)
                            console.log(cunmaotu0)

                            if (cunmaotu0 !== null && cunmaotu0.length !== 0) {
                                cunmaotu0.forEach(item => {
                                    $('#tupianyuelan1').append('<img src="' + item.url + '" alt="' + item.name + '" class="layui-upload-img">')
                                })
                            }

                        },
                        btn: ['确定', ], //可以无限个按钮
                        btnAlign: "c",
                        btn1: function() {
                            layer.closeAll();
                        }
                    })
                    break;
                default:
                    break;
            }
        })
        chongzai()
            // 获取所有列表数据的参数
        option = {
            id: 'biaoge1',
            url: url + "village/queryvillage",
            elem: "#zhenjiedaoxinxi",
            page: true,
            title: "01快熟使用",
            size: "lg",
            limits: [10, 20, 50, 100, 200, 500],
            headers: {
                token: localStorage.getItem('token')
            },
            text: {
                none: "本页暂无数据,请刷新页面", //默认：无数据。
            },
            request: {
                pageName: "currrntPage", //页码的参数名称，默认：page
                limitName: "size", //每页数据量的参数名，默认：limit
            },
            where: {
                keywords: ""
            },
            page: {
                curr: 1 //重新从第 1 页开始
            },
            parseData: function(res) {
                if (res.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }

                //res 即为原始返回的数据
                return {
                    code: 0, //解析接口状态
                    msg: res.msg, //解析提示文本
                    count: res.data.count, //解析数据长度
                    data: setdata(res.data.villages), //解析数据列表
                };
            },
            done() {
                quxiaojinyong()
            },
            cols: [
                [{
                    type: "checkbox",
                }, {
                    type: "numbers",
                    title: "序号",
                }, {
                    field: "townname",
                    title: "所属街道",
                    align: "center",
                }, {
                    field: "name",
                    title: "村名",
                    align: "center",
                }, {
                    field: "address",
                    title: "所属地区",
                    align: "center",
                }, {
                    field: "population",
                    title: "人口数量",
                    align: "center",
                    sort: true
                }, {
                    field: "footprint",
                    title: "占地面积",
                    align: "center",
                    sort: true
                }, {
                    title: "操作",
                    toolbar: "#caozuo",
                    align: "center",
                }, ],
            ],
        }
        tableIns = table.render(option);
        chongzai()
            //添加筛选条件
        areas.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            // 镇生成
        towns.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            //镇生成
        form.on('select(qu1)', function(data) {
            $('#zhen1').empty()
            $('#zhen1')[0].innerHTML += ` <option value="">地区筛选(镇/街道)</option>`
            villages.forEach(item => {
                if (item.areaId == data.value) {
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        // 村生成
        form.on('select(zhen1)', function(data) {
            $('#cun1').empty()
            $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
            villages.forEach(item => {
                if (item.townId == data.value) {
                    $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        form.render('select', "saixuan")
    });
    // 表格信息重载         (根据列表参数获取所有列表数据)
    function chongzai() {

    }
    // 控制添加数据用的弹出层
    function tianjia() {
        layer.open({
            type: 1,
            title: "行政村信息添加",
            content: `
<div class="juzhong">
    <form class="layui-form xingzhengcunxinxitianjia" lay-filter="tianjia" id="shangchuan" >
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" class="qu"  lay-filter="qu">
                        <option value="">请选择所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" class="zhen">
                        <option value="">请选择所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">村名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入村名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所在位置</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="address" required lay-verify="required" placeholder="请输入村所在位置" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">人口数</label>
            <div class="layui-input-block">
                <input type="number" lay-filter="zhenjiedaoxinxi" name="population" required lay-verify="required" placeholder="请输入村人口数" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">占地面积</label>
            <div class="layui-input-block">
                <input type="number" lay-filter="zhenjiedaoxinxi" name="footprint" required lay-verify="required" placeholder="请输入村占地面积 单位为平方米" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">村简介</label>
            <div class="layui-input-block">
                <textarea name="introduction" required lay-verify="required" placeholder="请输入村简介" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">村貌图</label>
            <div class="layui-input-block">
                <div class="layui-upload" name="">
                    <div class="layui-upload" name="">
                        <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                        <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="tupianyuelan"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" lay-submit class="layui-btn tijiao" lay-filter="tijiao">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
            offset: "auto",
            area: ["1000px", "800px"],
            success: function() {
                // 删除图片
                // $(".icon-shanchu").click(function() {
                //     console.log($(this).attr("data"));
                //     $(this).parents(".uploadDemoView").addClass('layui-hide');
                //     for (var i = 0; i < tupianJianSuo.length; i++) {
                //         if ($(this).attr("data") == tupianJianSuo[i]) {
                //             tupian1.splice(i, 1);
                //             tupianJianSuo.splice(i, 1);
                //         }
                //     }
                //     $(this).parents(".uploadDemoView").remove();
                //     console.log(tupian1)
                // })

                var tupianIndex = 0;
                var tupianJianSuo = []
                    // 将图片赋空  然后赋值
                tupian = []
                tupian1 = []
                areas.forEach(item => {
                    $('.qu')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                })
                towns.forEach(item => {
                    $('.zhen')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                })
                form.render('select', "tianjia");
                // 1.区选择
                form.on('select(qu)', function(data) {
                    $('#zhen').empty()
                    $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                    towns.forEach(item => {
                        if (item.areaId == data.value) {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                // 提交方法
                $(".tijiao").click(function() {
                    var data = form.val("tianjia");
                    if (tupian1.length !== 0) {
                        data.image = JSON.stringify(tupian1)
                    } else {
                        data.image = "[]"
                    }
                    console.log(data)
                        // console.log(formdata.get('village'))
                    if (data.address !== "" && data.townId !== "" && data.footprint !== "" && data.introduction !== "" && data.name !== "" && data.population !== "") {
                        data.id = 0
                        $.ajax({
                            url: url + "village/addoredivillage",
                            data: data,
                            method: "post",
                            traditional: true, //防止深度序列化
                            success: function(data) {
                                console.log(data)
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("biaoge1", option);
                                    layer.msg("添加成功")
                                } else {
                                    layer.msg("添加失败")
                                }
                                tupian = []
                                tupian1 = []
                            },
                            error: function(err) {
                                layer.msg("添加失败")
                            },
                        });
                    } else {}

                });
                // 上传图片的
                upload.render({
                    elem: '#shangchuantupian',
                    url: url + 'upload',
                    name: "files",
                    data: {
                        folderName: "Village"
                    },
                    headers: {
                        token: localStorage.getItem('token')
                    },
                    field: "multipartFiles",
                    auto: false,
                    bindAction: "#shangchuananniu",
                    multiple: true,
                    before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                        loading2 = layer.load(); //换了种风格
                    },
                    allDone: function(obj) { //当文件全部被提交后，才触发
                        layer.close(loading2);
                        layer.msg('上传成功')
                    },
                    choose: function(obj) {
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();

                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result) {
                            tupian.push(file)
                                // $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                            $('#tupianyuelan').append(
                                `<div class="layui-hide imgParent uploadDemoView">` +
                                `<img src="` + result + `" alt="` + file.name + `" class="layui-upload-img imgimg">` +
                                `<div class="imgspan" >` +
                                `<span class="iconfont icon-shanchu" data="` + tupianIndex + `" style="color: #fff;"></span>` +
                                `</div>` +
                                `</div>`
                            )
                            tupianJianSuo.push(tupianIndex);
                            tupianIndex++
                            layui.$('.uploadDemoView').removeClass('layui-hide');
                            // 删除图片
                            $(".icon-shanchu").click(function() {
                                console.log($(this).attr("data"));
                                $(this).parents(".uploadDemoView").addClass('layui-hide');
                                for (var i = 0; i < tupianJianSuo.length; i++) {
                                    if ($(this).attr("data") == tupianJianSuo[i]) {
                                        tupian1.splice(i, 1);
                                        tupianJianSuo.splice(i, 1);
                                        delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                                    }
                                }
                                $(this).parents(".uploadDemoView").remove();
                                console.log(tupian1)
                            })
                        });
                    },
                    done: function(res, index, upload) {
                        res.data = JSON.parse(res.data)
                        console.log(res)
                        if (res.code === 200) {
                            res.data.forEach(item => {
                                tupian1.push({
                                    name: item.name,
                                    url: item.url
                                })
                            })
                        }
                    },
                    error: function(index, upload) {
                        layer.msg("上传失败")
                            //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                    },

                })
            }


        });
    }
    // 根据上面的删除check选中的进行删除
    function shanchucheck() {
        var checkStatus = table.checkStatus("biaoge1"); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data); //获取选中行的数据
        var data = {}
        data.ids = [];
        checkStatus.data.forEach((item) => {
            data.ids.push(item.id);
        });
        console.log(data)
        if (data.ids.length !== 0) {
            $.ajax({
                url: url + "village/deletevillage",
                method: "get",
                data: data,
                traditional: true, //防止深度序列化
                success: function(data) {
                    if (data.code === 200) {
                        layer.closeAll();
                        table.reload("biaoge1", option);
                        layer.msg("删除成功")
                    } else {
                        layer.msg(data.msg)
                    }
                    console.log(data);

                },
                error: function(err) {},
            });
        } else {
            layer.msg('请选择本页要删除的项')
        }

    }

    function setdata(data) {
        console.log(data)

        data.forEach(item => {
            item.townname = gettown(item.townId).name

        });
        return data
    }
    // 查询方法
    function chaxun() {
        var data = form.val("saixuan");
        option.where.areaId = data.areaId
        option.where.townId = data.townid
        option.where.villageId = data.villageId
        option.where.keyWords = data.keyWords
        table.reload("biaoge1", option);
    }
    // 去除图片
    function quchutupian(url, e) {
        console.log(url)
        tupian1.forEach((item, index) => {
            if (item.url == url) {
                tupian1.splice(index, 1);
            }
        })
        $('#tupianyuelan')[0].removeChild(e)
        console.log(tupian1)
    }
</script>
<!-- 操作框两个按钮的模板 -->
<script type="text/html" id="caozuo">
    <button class=" layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
    <button class=" layui-btn layui-btn-xs layui-btn-warm" lay-event="xiangqing">详情</button>
    <button disabled class="quanxiancaozuo layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>

</script>

</html>